<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车商城</title>
    <link rel="shortcut icon" href="/auto/favicon.ico" type="image/x-icon">
    <script src="/admin/qrcode/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="/auto/Css/bootstrap.min.css">
    <link rel="stylesheet" href="/auto/font/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/auto/Css/base.css">
    <link rel="stylesheet" href="/auto/Css/lib.css">
    <link rel="stylesheet" href="/auto/Css/index.css">
    <link rel="stylesheet" href="/auto/Css/reservePrice.css">
    <script src="/auto/js/reservePrice.js"></script>

</head>

<body>
<!-- top bar -->
<div class="top_bar">
    <div class="top_bar_con">
        <div class="top_bar_left">
            <img src="/auto/images/logo.png" alt="">
            <img src="/auto/images/slogan.svg" alt="">
        </div>
        <div class="top_bar_search clearfix">
            <form action="">
                <input type="text" class="search-input" name="keyword" placeholder="搜索品牌、车型等" id="search-input">
                <i class="fa fa-search "></i>
                <input type="submit" class="search-btn" value="搜索" bosszone="search">
            </form>
        </div>
        <div class="top_bar_right">
            <a href="/end/auto/index.html" class="active">首页</a>
            <a href="/end/auto/VehicleScre.html">选车</a>
            <a href="/end/auto/Personal.html" id="userCollect">我的收藏</a>
            <button id="loading">请登录</button>
            <a href="javascript:;" id="user"></a>
            <button id="loginOut">退出</button>
        </div>
    </div>
</div>
<!-- 主体内容 -->
<div class="reservePrice">
    <div class="reserve_header">
        <ul class="page_head">
            <li class="sign">询底价</li>
            <li>预约试驾</li>
        </ul>
    </div>
    <div class="reserve_main">
        <div class="reserve_left">
            <div class="reserve_left_top">
                <div>
                    <img id="autoImg" width="206px" height="120px"
                         src="/auto/images/c313bfc9b0f44c408c195f1486783df7.png" alt="">
                </div>
                <div>
                    <p id="autoName"></p>
                    <select name="carName" id="carFor">

                    </select>
                    <br>
                    <span class="zdPrice"></span>
                </div>
            </div>
            <div class="reserve_left_con">

                <label for="name1">用户姓名</label>
                <input type="text" id="name1">
                <input type="radio" name="nn" checked value="先生">先生
                <input type="radio" name="nn" value="女士">女士
                <br>
                <label for="phone">手机号码</label>
                <input type="text" placeholder="输入11位手机号码" id="phone1">
                <br>
                <label for="">&nbsp;经销商</label>
                <input type="text" class="distributor" id="sName">
                <br>
                <button type="submit" id="submit_btn" class="submit_btn">立即询价</button>
                <p><i class="fa fa-shield" aria-hidden="true"></i>我们将严格保护您的信息安全</p>
            </div>
        </div>
        <div class="reserve_right" id="spencer">
            <p>本地经销商</p>
            <span>选择经销商</span>
            <ul id="spencerName">

            </ul>
        </div>
    </div>
</div>
<!-- 首页底部 -->
<div class="bottom_bar">
    <div class="custom_ser">
        <div class="custom_ser_main">
            <div>
                <span>周一至周五</span><br>
                <span>9:00-17:00</span>
            </div>
            <div>
                <h4>175-3012-3061</h4>
                <p>商城客服热线</p>
            </div>
            <div>
                <img src="/auto/images/1210339.png" alt="">
            </div>
            <div>
                <h3>扫码享权益</h3>
                <p>优惠随时掌握</p>
            </div>
        </div>
    </div>
    <div class="about_us">
        <div class="about_us_main">
            <ul>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">隐私政策</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">客服中心</a>
                </li>
            </ul>
            <br>
            <p>Copyright © 2021 - 2022 Car Shop. All Rights Reserved</p>
            <p>汽车商城 版权所有</p>
        </div>
    </div>
</div>
<!-- 登录页面 -->
<div class="land_page_back">
    <div class="land_page">
        <div class="land_page_con">
            <div class="land_page_top">
                <p>💁‍♂️ 密码登录</p>
                <a href="#" id="load_close">✕</a>
            </div>
            <div class="land_page_main">
                <input id="phone" placeholder="请输入手机号" type="tel" maxlength="50" autocomplete="tel" name="account"
                       value="">
                <input id="pas_input" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                       name="account" value="">
                <img id="eye_img" src="/auto/images/close.png" alt="">
                <button type="button" id="login">登录</button>
            </div>
            <div class="land_page_bottom">
                <a href="#" id="click_register">没有账号？点击注册</a> <br>
                <p>登录即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
            </div>
        </div>
    </div>
    <div class="register">
        <div class="land_page">
            <div class="land_page_con">
                <div class="land_page_top">
                    <p>🙆‍♂️ 注册账号</p>
                    <!-- <a href="#" id="load_close">✕</a> -->
                </div>
                <div class="land_page_main register_main">
                    <input placeholder="请输入手机号" id="addPhone" type="tel" maxlength="50" autocomplete="tel"
                           name="account"
                           value="">
                    <input placeholder="请输入用户名" id="addName" type="tel" maxlength="50" autocomplete="tel" name="account"
                           value="">
                    <input id="pas1" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye1" src="/auto/images/close.png" alt="">
                    <input id="pas2" placeholder="确认密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye2" src="/auto/images/close.png" alt="">
                    <label>
                        <p>注册即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
                    </label>
                    <button type="button" id="userAdd">点击注册</button>
                </div>
                <div class="land_page_bottom">
                    <a href="#" id="return_log">↺返回登录</a> <br>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/auto/lib/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        let flag = false;
        $('.page_head').children().on('click', function () {
            $(this).addClass('sign').siblings().removeClass('sign');
            flag = !flag;
            if (flag) {
                $('.submit_btn').html('免费预约');
            } else {
                $('.submit_btn').html('立即询价');
            }
        })
    })
</script>
<script>
    let obj;
    function GetQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    $(function () {
        let id = GetQueryString("id");
        $.ajax({
            type: "GET",
            url: "/Views/queryById",
            data: {id: id},
            dataType: "json",
            success: function (data) {
                obj = data;
                $("#autoName").html(obj[0].auto.autoName);
                let str;
                for (let i = 0; i < obj.length; i++) {
                    if (i === 0) {
                        str += '<option value="' + data[i].auto.model + '" selected>' + data[i].auto.model + '</option>'
                    } else {
                        str += '<option value="' + data[i].auto.model + '">' + data[i].auto.model + '</option>'
                    }
                }
                $('.zdPrice').html('价格: ￥' + obj[0].auto.price);
                $("#autoImg").prop('src', '/assets/images/auto/' + obj[0].auto.picture);
                $("#carFor").html(str);
                let autoId = obj[0].auto.autoId;
                $.ajax({
                    type: "GET",
                    url: "/Views/querySpencer",
                    data: {autoId: autoId, carId: id},
                    dataType: "json",
                    success: function (data) {
                        let str="";
                        for (let j = 0; j < data.length; j++) {
                            str += '<li>\n' +
                                '                        <input class="checkAdd" type="radio" name="address" id=""   value="' + data[j].spencerName + '">' + data[j].spencerName + '\n' +
                                '                        <p><i class="fa fa-map-marker" aria-hidden="true"></i>地址:\n' +
                                '                            <span>\n' +
                                '                                ' + data[j].location + '\n' +
                                '                            </span>\n' +
                                '                            </p>\n' +
                                '                    </li>'
                        }
                        $('#spencerName').html(str);
                    }
                });
            }
        })
    })


</script>
<script>
    setTimeout(function (){
        $('.checkAdd').click(function (){
            let valueAdd = $("input[name='address']:checked").val();
           $('.distributor').prop('value',valueAdd);
    })
    },1000);

    $("#submit_btn").click(function (){
        let userName = $("#name1").val()+$("input[name='nn']:checked").val();
        let phone = $("#phone1").val();
        let spencerName=$("#sName").val();
        let autoId = GetQueryString("id");
        $.ajax({
            type: "POST",
            url: "/Views/insertOrders",
            data: {userName:userName,phone:phone,spencerName:spencerName,autoId:autoId},
            dataType: "json",
            success: function (data) {
                if (data.code===200){
                    alert("预约成功");
                    location.href="/end/auto/VehicleScre.html";
                }else {
                    alert(data.msg)
                }
            }
        })
    })
</script>
<!-- 登录 -->
<script>
    var load = document.querySelector('.top_bar .top_bar_right #loading');
    var closePage = document.getElementById('load_close');

    var land_page = document.querySelector('.land_page_back');
    var reg_btn = document.getElementById('click_register');
    var login_page = document.querySelector('.land_page_back .land_page');
    var registerPage = document.querySelector('.land_page_back .register');
    var return_log = document.getElementById('return_log');
    console.log(load, closePage, land_page, reg_btn, login_page);
    load.onclick = function () {
        land_page.style.display = 'block';
    }
    closePage.onclick = function () {
        land_page.style.display = 'none';
    }
    reg_btn.onclick = function () {
        login_page.style.display = 'none';
        registerPage.style.display = 'block';
    }
    return_log.onclick = function () {
        login_page.style.display = 'block';
        registerPage.style.display = 'none';
    }

    // 控制密码是否可见
    // 登录 一个
    let eyeImg = document.getElementById('eye_img');
    let pasInput = document.getElementById('pas_input');

    let flag = false;
    eyeImg.onclick = function () {
        flag = !flag;
        if (flag) {
            eyeImg.src = '/auto/images/open.png';
            pasInput.type = 'text';
        } else {
            eyeImg.src = '/auto/images/close.png';
            pasInput.type = 'password';
        }
    }

    // 注册两个
    let eye1 = document.getElementById('eye1');
    let pas1 = document.getElementById('pas1');

    let flag1 = false;
    eye1.onclick = function () {
        flag1 = !flag1;
        if (flag1) {
            eye1.src = '/auto/images/open.png';
            pas1.type = 'text';
        } else {
            eye1.src = '/auto/images/close.png';
            pas1.type = 'password';
        }
    }

    let eye2 = document.getElementById('eye2');
    let pas2 = document.getElementById('pas2');

    let flag2 = false;
    eye2.onclick = function () {
        flag2 = !flag2;
        if (flag2) {
            eye2.src = '/auto/images/open.png';
            pas2.type = 'text';
        } else {
            eye2.src = '/auto/images/close.png';
            pas2.type = 'password';
        }
    }

    let login = document.getElementById('login');
    let userAdd = document.getElementById('userAdd');
    let loginOut = document.getElementById('loginOut');

    //判断是否登录
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Login/LoginBy",
            data: "",
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    $("#loading").hide();
                    $("#user").html(data.obj.userName);
                } else {
                    $("#loginOut").hide();
                    $("#userCollect").hide();
                }
            }
        })
    })

    //登录
    login.onclick = function () {
        let phone = $("#phone").val();
        let password = $("#pas_input").val();
        var windowId = layer.load()
        $.ajax({
            type: "POST",
            url: "/Login/userLogin",
            data: {phone: phone, password: password},//主要是分页和多条件参数数据
            dataType: "json",
            success: function (data) {
                //关闭弹窗
                layer.close(windowId);
                //显示结果和跳转页面
                layer.msg(data.msg)
                if (data.code === 200) {
                    location.reload()
                }
            }
        })
    }

    //注册
    userAdd.onclick = function () {
        let addName = $("#addName").val();
        let addPhone = $("#addPhone").val();
        let pwd1 = $("#pas1").val();
        let pwd2 = $("#pas2").val();
        if (pwd1 !== pwd2 || pwd1 === null || pwd2 === null) {
            alert("两次密码不匹配，或密码为空了");
        } else if (addName === null) {
            alert("用户名不能为空！")
        } else if (addPhone === null) {
            alert("手机号不能为空！")
        } else {
            $.ajax({
                type: "POST",
                url: "/Views/userAdd",
                data: {phone: addPhone, userName: addName, passWord: pwd1},
                dataType: "json",
                success: function (data) {
                    if (data.code === 200) {
                        alert("注册成功,请登录")
                        location.reload(true);
                    } else if (data.code === 500) {
                        alert(data.msg);
                    } else {
                        alert(data.msg);
                    }
                }
            })
        }
    }

    loginOut.onclick = function () {
        $.ajax({
            type: "post",
            url: "/Login/userLogout",
            data: "",
            dataType: "json",
            success: function (data) {
                alert(data.msg);
                location.reload(true);
            }
        })
    }
</script>
</body>
</html>